<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机排序</title>
<link rel="stylesheet" href="css/base.css" />
<script type="text/javascript" src="js/common.js" ></script>
<style>
	.cart-wrap{}
	.carttit{height: 38px; line-height: 38px; text-align: center; border-radius: 5px; background-color: #ebebeb;}
	.carttit span,.cartbox span{float: left; display: block;}
	.cartt-1,.cartb-1{width:10%;}
	.cartt-2,.cartb-2{width:50%;}
	.cartt-3,.cartb-3{width:20%;}
	.cartt-4,.cartb-4{width:20%;}
	.cartt-4{cursor: pointer;}
	.cartbox{padding:10px; height: 44px; line-height: 44px; border-bottom: 1px solid #DDDDDD;}
	.cartb-1,.cartb-3,.cartb-4{text-align: center;}
	.cartb-2{line-height: 21px;}
</style>
</head>
<body>
<div class="wrap">
	<h2 class="wrap-h2">javascript 排序</h2>
	<div class="wrap-main">
		<div class="cart-wrap" id="cartwrap">
			<div class="carttit">
				<span class="cartt-1">序号</span>
				<span class="cartt-2">产品</span>
				<span class="cartt-3">数量（件）</span>
				<span class="cartt-4">金额（元）</span>
			</div>
			<div class="cartmain" id="cartmain">
				<div class="cartbox clearfix">
					<span class="cartb-1">1</span>
					<span class="cartb-2">亿家达电视柜茶几组合简约现代电视机柜钢化玻璃茶几客厅伸缩地柜</span>
					<span class="cartb-3">1</span>
					<span class="cartb-4 js-money">399</span>
				</div>
				<div class="cartbox clearfix">
					<span class="cartb-1">2</span>
					<span class="cartb-2">简约现代布艺沙发小户型客厅家具整装组合可拆洗转角三人位布沙发</span>
					<span class="cartb-3">1</span>
					<span class="cartb-4 js-money">999</span>
				</div>
				<div class="cartbox clearfix">
					<span class="cartb-1">3</span>
					<span class="cartb-2">男子夏季超薄休闲透气长裤</span>
					<span class="cartb-3">1</span>
					<span class="cartb-4 js-money">78</span>
				</div>
				<div class="cartbox clearfix">
					<span class="cartb-1">4</span>
					<span class="cartb-2">餐桌椅子靠背现代简约懒人家用经济型餐厅饭店时尚酒店餐椅成人</span>
					<span class="cartb-3">1</span>
					<span class="cartb-4 js-money">38</span>
				</div>
				<div class="cartbox clearfix">
					<span class="cartb-1">5</span>
					<span class="cartb-2">冰丝裤子男夏季超薄款小脚男士韩版潮流运动裤松紧宽松夏天休闲裤</span>
					<span class="cartb-3">1</span>
					<span class="cartb-4 js-money">122</span>
				</div>
				<div class="cartbox clearfix">
					<span class="cartb-1">6</span>
					<span class="cartb-2">雅格电蚊拍充电式家用强力灭蚊多功能电池可换LED灯电苍蝇蚊子拍</span>
					<span class="cartb-3">1</span>
					<span class="cartb-4 js-money">39</span>
				</div>
				
				
				<div class="cartbox clearfix">
					<span class="cartb-1">7</span>
					<span class="cartb-2">青年夏季短袖T恤男圆领印花潮流体恤男装修身半袖上衣打底衫夏装</span>
					<span class="cartb-3">1</span>
					<span class="cartb-4 js-money">69</span>
				</div>
				<div class="cartbox clearfix">
					<span class="cartb-1">8</span>
					<span class="cartb-2">小猪佩奇防水pvc墙贴墙纸幼儿园儿童房卧室卡通墙面卡通装饰贴画</span>
					<span class="cartb-3">1</span>
					<span class="cartb-4 js-money">18</span>
				</div>
				<div class="cartbox clearfix">
					<span class="cartb-1">9</span>
					<span class="cartb-2">儿童手表男孩女孩防水夜光电子表 可爱女童小学生游泳果冻手表潮</span>
					<span class="cartb-3">1</span>
					<span class="cartb-4 js-money">42</span>
				</div>
				<div class="cartbox clearfix">
					<span class="cartb-1">10</span>
					<span class="cartb-2">12张 宝宝幼儿童积木质拼图2-3-4-5-6岁早教益智力男女孩拼插玩具</span>
					<span class="cartb-3">1</span>
					<span class="cartb-4 js-money">46</span>
				</div>
				<div class="cartbox clearfix">
					<span class="cartb-1">11</span>
					<span class="cartb-2">儿童电话手表学生多功能电信版智能打GPS定位防水可爱手机男女孩</span>
					<span class="cartb-3">1</span>
					<span class="cartb-4 js-money">199</span>
				</div>
				<div class="cartbox clearfix">
					<span class="cartb-1">12</span>
					<span class="cartb-2">手机壳iphone X保护套防摔硅胶软男女全包磨砂潮</span>
					<span class="cartb-3">1</span>
					<span class="cartb-4 js-money">9.9</span>
				</div>
				<div class="cartbox clearfix">
					<span class="cartb-1">13</span>
					<span class="cartb-2">甘蔗刀菠萝刀削皮器不锈钢去眼夹菠萝神器挖籽锉刀水果削皮去皮器</span>
					<span class="cartb-3">1</span>
					<span class="cartb-4 js-money">8.9</span>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	window.onload = function ()
	{
		var oCart = document.getElementById("cartwrap");
		var oMain = document.getElementById("cartmain");
		var oBtn =  miaov.common.getByClass("cartwrap","cartt-4");
		var oBox = miaov.common.getByClass("cartmain","cartbox");
		var oMoney = miaov.common.getByClass("cartmain","js-money");
		
		var newdata = [];
		var flag	= true;
		oBtn[0].onclick = function ()
		{
			//转换数组
			for(var i=0; i<oMoney.length; i++)
			{
				newdata[i] = oBox[i];
			}
			
			//数组排序
			newdata.sort(function(div1,div2){
				if(flag)
				{
					return parseInt(div1.querySelector(".js-money").innerHTML) - parseInt(div2.querySelector(".js-money").innerHTML);
				}
				else{
					return parseInt(div2.querySelector(".js-money").innerHTML) - parseInt(div1.querySelector(".js-money").innerHTML);
				}
			})
			
			//插入demo
			for(var i=0; i<newdata.length; i++)
			{
				oMain.appendChild(newdata[i]);
			}
			
			flag =! flag;
		}
	}
</script>
</body>
</html>
